<template>
  <el-row class="block-col-2">
    <el-col :span="24">
      <el-dropdown>
        <span>
          <!-- <img src="../assets/user.jpg" id="avatar"> -->
          <span class="userStyle" >您好!  {{userName}}</span>
        </span>
        <template #dropdown>
            <el-dropdown-menu>
            <el-dropdown-item>密码修改</el-dropdown-item>
            <el-dropdown-item> <a @click="logout">退出登录</a></el-dropdown-item>
            </el-dropdown-menu>
        </template>
      </el-dropdown>
    </el-col>
  </el-row>
</template>


<script>
import axios from '../utils/request'
import { ElNotification } from "element-plus";
export default {
  data(){
    return {
      userName:''
    }
  },
  methods:{
    logout(){
      axios.get('/logout').then(res=>{
        console.log(res.data.message)
        if(res.data.status == 200){
          ElNotification.success(res.data.message)
        }
      })
      localStorage.clear();
      sessionStorage.clear();
      this.$store.commit('clearAllData');
      this.$router.push('/login');
      location.reload();
    },
    getUserName(){
      axios.get('userInfo').then(res=>{
        // console.log("用户数据：",res);
        this.userName = res.data.data.userName;
        this.$store.commit('SET_USERINFO',res.data.data);
        // console.log(res.data.data)
      })
    }
  },
  created(){
    this.getUserName();
  }
}
</script>

<style scoped>
#avatar{
    border-radius:50%;
    width:30%;
    height: 60%;
}

.userStyle{
  
  font-size: 1.2em;
  
}
</style>